<template>
  <view>
    <view class="user">

      <image class="avatar" mode="aspectFit" :src="memberInfo.avatar?memberInfo.avatar:'/static/avatar.png'"
             @error="imageError"></image>

      <view class="info">
        <view style="display: flex;flex-direction: row;">

          <text v-if="memberInfo.username!==''" @click="openMemberInfo"
                style="font-size: 30rpx;font-weight: bold;color: white;">{{ memberInfo.username }}
          </text>
          <text v-else @click="dialogConfirm" style="font-size: 30rpx;font-weight: bold;color: white;">立即登录</text>
          <uni-icons type="right" size="12" style="margin-left: 5rpx;color: white;"></uni-icons>

        </view>
      </view>
    </view>

    <view v-for="(item, index) in gameList" :key="index" style="padding: 10px">

      <uni-card is-full>
        <view class="swiper-item" >
          <image style="width: 35px;height: 35px;" mode="scaleToFill" src="/static/eight_ball.png"
                 @error="imageError"></image>

          <view style="display: flex;flex-direction: column; justify-items: center;margin-left: 20px;width: 100%">
            <view style="display: flex;flex-direction: row;justify-content: space-between;">
              <span style="color: black;font-weight: bold">{{item.username}}创建的对局</span>
              <uni-tag v-if="item.status==='0'" text="待开始" type="success"/>
              <uni-tag v-if="item.status==='1'" text="进行中" type="success"/>
              <uni-tag v-if="item.status==='2'" text="已结束" type="success"/>

            </view>
            <view style="display: flex;flex-direction: row;justify-content: space-between;">
              <span>中式八球</span>
              <span style="color: #cccaca">{{ item.createTime }}</span>
            </view>
          </view>

        </view>
      </uni-card>


    </view>

    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog type="info" confirmText="去登录" title="提示" content="您需要登录才能完成此操作"
                        @confirm="dialogConfirm"
      ></uni-popup-dialog>
    </uni-popup>

  </view>
</template>

<script>
import gameService from "../../api/game";

export default {
  data() {
    return {
      memberInfo: this.$store.state,
      gameList: []
    }
  },
  onLoad() {

  },
  onShow() {
    if (this.memberInfo.username === "") {
      this.dialogToggle()
    }
    this.list()
  },
  methods: {
    list() {
      gameService.myGame(this.memberInfo.memberId).then((res) => {
        if (res.data.code === 200) {
            this.gameList = res.data.data
        }
      })
    },
    openMemberInfo() {
      uni.navigateTo({
        url: '/pages/my/info/index'
      });
    },
    dialogConfirm() {
      uni.navigateTo({
        url: '/pages/my/login/index'
      });
    },
    dialogToggle() {
      this.$refs.alertDialog.open()
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100%;
  margin-top: 20rpx;

  .content-card {
    margin-left: 20rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
    background-color: white;
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .card-item {
      display: flex;
      width: 200rpx;
      height: 150rpx;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}


.card {
  height: 120rpx;
  margin-top: -60rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;

  .card-content {
    background-color: #2a2c41;
    width: 90%;
    border-radius: 20rpx;
    display: flex;
    flex-direction: row;
    margin-right: 20rpx;
    align-items: center;
    justify-content: space-between;
  }
}

.swiper-item {
  display: flex;
  flex-direction: row;
  align-items: center;

}

.user {
  height: 350rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-image: url("");
  background-position: center;
  background-size: 100% 100%;
  align-items: center;

  .avatar {
    width: 60px;
    height: 60px;
    margin-left: 80rpx;
    border-radius: 10rpx
  }

  .info {
    display: flex;
    height: 60px;
    margin-top: 10px;
    margin-left: 10px;

    justify-content: center;
    text-align: center;

    // margin-top: -10rpx;

  }
}
</style>
